<!--
 * @Author: Baishui
 * @Date: 2021-09-28 20:44:47
 * @LastEditors: 陈少泉
 * @LastEditTime: 2021-10-10 20:41:39
 * @Description: file content
-->

<template>
  <div class="demo-box">
    <svg id="demo" width="400" height="400" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted } from 'vue'
  import * as d3 from 'd3'

  export default defineComponent({
    name: 'D3Demo',
    components: {},
    setup() {
      const state = reactive({})

      onMounted(() => {
        initChart()
      })

      function initChart() {
        const circle = [{ cx: 50, cy: 50, r: 20 }]
        const svg = d3.select('#demo')
        svg.attr('width', '100%')
        svg.attr('height', '100%')
        svg.attr('viewBox', '0 0 400 400')
        // const zoom = d3.zoom().scaleExtent([1, 10]).on('zoom', zoomed)
        // const g = svg.append('g').call(d3.zoom().scaleExtent([1, 10]).on('zoom', zoomed))
        const g = svg.append('g').call(d3.zoom().on('zoom', zoomed))

        g.selectAll('circle')
          .data(circle)
          .enter()
          .append('circle')
          .attr('cx', (d) => d.cx)
          .attr('cy', (d) => d.cy)
          .attr('r', (d) => d.r)
          .attr('fill', 'black')

        function zoomed(ev) {
          // g.attr('transform', `translate(${d3.event.translate}) scale(${d3.event.scale})`)
          g.attr('transform', ev.transform)
        }
      }

      return {
        ...toRefs(state),
      }
    },
  })
</script>
<style lang="less" scoped>
  .wrapper {
  }
</style>
